/*柱形图*/
import React, { Component } from 'react';
import { Card } from 'antd';
// import echarts from 'echarts';
import echarts from 'echarts/lib/echarts';   // 按需加载echarts核心组件
import echartsTheme from '../../configs/echart_theme_configs';  //导入定制主题
import ReactEcharts from 'echarts-for-react';

// 导入柱形图
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';


export default class Bar extends Component {

  componentWillMount() {
    echarts.registerTheme('Pinlor', echartsTheme);
  }

  render() {
    return (
      <div>
        <Card title="柱形图表之一" className="pinlor-cards">
          <ReactEcharts option={this.getOption()} theme="Pinlor" style={{height: 500}} />
        </Card>
        <Card title="柱形图表之二" className="pinlor-cards">
          <ReactEcharts option={this.getOption2()} theme="Pinlor" style={{height: 500}} />
        </Card>
      </div>
    )
  }

  getOption = () => {
    const option = {
      title: {
        text: '用户订单'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: ['周一','周二','周三','周四','周五','周六','周日',]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单量',
          type: 'bar',
          data: [1000, 2000, 1500, 3000, 2000, 1200, 800]
        }
      ]
    };
    return option;
  };

  getOption2 = () => {
    const option = {
      title: {
        text: '用户订单'
      },
      legend: {
        data: ['商品一', '商品二', '商品三']
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: ['周一','周二','周三','周四','周五','周六','周日',]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '商品一',
          type: 'bar',
          data: [1000, 2000, 3000, 5500, 8000, 12000, 20000]
        },
        {
          name: '商品二',
          type: 'bar',
          data: [1500, 3000, 4500, 6000, 8000, 10000, 15000]
        },
        {
          name: '商品三',
          type: 'bar',
          data: [1000, 2000, 2500, 4000, 6000, 7000, 8000]
        }
      ]
    };
    return option;
  }
}
